<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="8">
            <el-form-item label="申请日期" style="height:30px">
            <el-date-picker
              v-model="alarmdate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号"><el-input
              v-model="listQuery.fbillno"
              clearable
              placeholder="请输入单据编号"
            /></el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item  label="存放地点">
               <el-select  clearable filterable v-model="listQuery.fpointNo"  placeholder="请选择存放地点">
                <el-option
                v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="申请人员">
                <el-select clearable filterable v-model="listQuery.fuseuser" placeholder="请选择申请人员">
                <el-option
                v-for="item in getListfuseuser"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleFilter">查找</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
        <JNPF-table  v-loading="listLoading" :data="list" >
          <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序号" type="index" />
          <el-table-column :width="buttonColor.billno" align="left" label="单据编号" prop="fbillno" />
          <el-table-column :formatter="formatfpointNo" align="left" label="存放地点" prop="fpointNo"/>
          <el-table-column align="left" label="货柜" prop="fequipmenttag" />
          <el-table-column :width="buttonColor.user" :formatter="formatfuseuser" align="left" label="使用人员" prop="fuseuser" />
          <el-table-column :width="buttonColor.date" :formatter="datetimeFormat" align="left" label="使用日期" prop="fplanusedate" />
          <el-table-column align="left" label="容器标签" prop="frfidbarcode" width="160"/>
          <el-table-column align="left" label="物料编号" prop="fgoodno" width="100"/>
          <el-table-column :width="buttonColor.name" :formatter="formatfgoodno" align="left" label="物料名称" prop="fgoodname"/>
          <el-table-column width="200" align="left" label="报警信息" prop="warringInfo" />
        </JNPF-table>
        <paginations
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          />
      </div>
    </div>
  </div>
</template>
<script>
import { listuseDetail } from '@/api/useDetail'
import Pagination from '@/components/Pagination'
import { getListArea } from '@/api/area'
import UserDialog from '@/components/UserDialog'
import LabDialog from '@/components/LabDialog'
import moment from 'moment'
import { tableColor,buttonColor } from '@/filters/index'
export default {
  name: 'ITcUseDetail',
  components: { Pagination, UserDialog, LabDialog },
  data() {
    return {
      buttonColor:buttonColor,
      labFlag:null,
      showAll:false,
      searchVisiblelab: false,
      labDialogFsiteNo: null,
      userFlag:null,
      searchVisibleuse: false,
      userDialogFsiteNo:null,
      alarmdate: null,
      tableColor: tableColor,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fpointNo: undefined,
        fuseuser: undefined,
        fbillno: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      getListfpointNo:[],
      getListfuseuser:[],
      goodAllList:[],
      fbillstateOptions: [
        { value: 1, label: '预约中' },
        { value: 2, label: '已批准' },
        { value: 3, label: '不核准' },
        { value: 8, label: '已取消' },
      ]
    }
  },
  created() {
    this.alarmdate = [new Date(), new Date()]
    this.getList()
      if(this.$store.state.user.fsiteLevel==3){
        // 人员弹出框
        getListArea({flag:13,arg1:this.$store.state.user.fsiteNo})
        .then(response => {
          this.getListfuseuser = response.data.data.list
        })
        .catch(() => {
          this.getListfuseuser = []
        })

        // 地点
        getListArea({ flag: 10,arg1:this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })

      }else{
         // 人员弹出框
          getListArea({flag:13})
          .then(response => {
            this.getListfuseuser = response.data.data.list
          })
          .catch(() => {
            this.getListfuseuser = []
          })

          // 地点
      getListArea({ flag: 10 })
      .then(response => {
        this.getListfpointNo = response.data.data.list
      })
      .catch(() => {
        this.getListfpointNo = []
      })
      }

          // 物料
      getListArea({ flag: 31 })
        .then(response => {
          this.goodAllList = response.data.data.list
        })
        .catch(() => {
          this.goodAllList = []
        })

  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    formatDate: function(date) {
      if(typeof(date)==='object'){
         var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = '' + y + m + d
      return ym
      }else{
        return date
      }
    },
      // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value
      if(value === 'add'){
        this.labDialogFsiteNo = this.dataForm.fsiteNo
      }else{
        this.labDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisiblelab = true
    },

    // 地点弹出框返回值
    labDialogValue(value){
      if(this.labFlag==='add'){
        this.dataForm.fpointNo = value.lab.fpointNo
        this.dataForm.details=[]
      }else{
        this.listQuery.fpointNo = value.lab.fpointNo
      }
    },

    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value
      if(value === 'add'){
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      }else{
        this.userDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisibleuse = true
    },

    // 人员弹出框返回值
    userDialogValue(value){
      if(this.userFlag==='add'){
        this.dataForm.fuseuser = value.user.id.toString()
      }else{
        this.listQuery.fuseuser = value.user.id.toString()
      }
    },
      // 地点
    formatfpointNo: function(row, column) {
      if (this.getListfpointNo) {
        for (let i = 0; i < this.getListfpointNo.length; i++) {
          if (row.fpointNo === this.getListfpointNo[i].value) {
            return this.getListfpointNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 人员
    formatfuseuser: function(row, column) {
      if(this.getListfuseuser){
        for (let i = 0; i < this.getListfuseuser.length; i++) {
        if (row.fuseuser == this.getListfuseuser[i].value) {
          return this.getListfuseuser[i].label
        }
      }
      return ''
      }else{
      return ''
      }
    },
    // 物料名称
    formatfgoodno: function(row, column) {
      if (this.goodAllList.length > 0) {
        for (let i = 0; i < this.goodAllList.length; i++) {
          if (row.fgoodno === this.goodAllList[i].value) {
            return this.goodAllList[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    getList() {
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true
      listuseDetail(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>